<template>
    <div class="content" v-if="breadcrumb != null">
        <div class="top-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>{{ breadcrumb.brand }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ breadcrumb.factory }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ breadcrumb.series }}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="breadcrumb.type_name">{{ breadcrumb.type_name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button class="upload" type="primary" @click="uploadBtn">
                上传视频
                <i class="el-icon-upload el-icon--right"></i>
            </el-button>
        </div>

        <el-divider content-position="left" class="divider_text">{{ type_name }} 视频列表</el-divider>
        <ul class="video-list" v-if="videoList.length > 0">
            <!-- 视频列表渲染 -->
            <li v-for="(item, index) in videoList" v-bind:key="item.id">
                <div class="video-item-image"  @click="editVideo(item)">
                    <img v-if="item.is_top == 1" class="top-label" src="../../../../assets/images/toplabel.png"/>
                    <img :src="item.image_url" :alt="item.title" class="video-image" />
                    <div class="is-expire" v-show="new Date(item.expiration_time).getTime() < Date.now()"></div>
                    <div class="play-mask">
                        <!-- <img class="play-btn" src="./images/play.png" /> -->
                        <span title="复制小程序链接">
                            <svg
                            class="icon video-message"
                            aria-hidden="true"
                            @click.stop="copyVideo(index, item)"
                            >
                            <use xlink:href="#icon-lianjie" />
                            </svg>
                        </span>
                        <svg
                            v-if="item.is_top == 0"
                            class="icon top-video"
                            aria-hidden="true"
                            @click.stop="topVideo(index, item)"
                        >
                            <use xlink:href="#icon-zhiding2" />
                        </svg>
                        <svg
                            v-else
                            class="icon top-video"
                            aria-hidden="true"
                            @click.stop="topVideo(index, item)"
                        >
                            <use xlink:href="#icon-quxiaozhiding" />
                        </svg>
                        <svg
                            class="icon video-del"
                            aria-hidden="true"
                            @click.stop="delVideo(index,item)"
                        >
                            <use xlink:href="#icon-shanchu" />
                        </svg>
                        <div class="play-mask-bg"></div>
                    </div>
                </div>
                <span class="video-title">{{ item.title }}</span>
            </li>
        </ul>
        <div v-else style="margin-top: 20%; font-size: 1rem; text-align: center; color: #808080">
            <span>暂无该车型视频</span>
        </div>
        <upload-video ref="uploadVideo"></upload-video>
    </div>
</template>

<script>
import { brandModel } from "../api.js"
import uploadVideo from "./video-upload-components.vue";
export default {
    components: { uploadVideo },
    data() {
        return {
            breadcrumb: null,
            type_name: "",
            carTypeId: "",
            videoList: [],
        };
    },
    beforeRouteEnter(to, from, next) {
        // 以缓存形式存储brand_id 以防F5刷新路由参数：brand_id丢失
        if(from.params.brand_id) {
            localStorage.setItem('brand_id', from.params.brand_id);
        } else {
            to.params.brand_id = localStorage.getItem('brand_id')
        }
        next();
    },
    beforeRouteLeave(to, from, next) {
        // 清除缓存
        localStorage.removeItem('brand_id');
        next();
    },
    methods: {
        async getBreadcrumb() {
            const res = await this.$http.post(
                `/admin/yt_car/index.php?act=yt_car&op=getTitle&brand_id=` +
                this.carTypeId
            );
            // console.log(res)
            if (res.code == 1 && res.data) {
                this.breadcrumb = res.data;
                this.type_name = res.data.type_name;
            }
        },
        async topVideo(index, item) {
            // console.log('isTop:'+item.is_top)
            var top_status = item.is_top == 0 ? 1 : 0;
            // console.log('top_status:'+top_status)
            let data = {
                id: item.id,
                is_top: top_status,
            };
            let res = await brandModel.topVideo(data);
            if (res.code === 1) {
                this.$message({
                type: "success",
                message: "操作成功!",
                });
                this.videoList[index].is_top = top_status;
            } else {
                this.$message.error(res.msg);
            }
        },
           copyVideo(index, item){
                this.$http.post('/admin/yt_car/index.php?act=yt_car&op=getVideoShortUrl&id='+item.id).
                    then(res => {
                    if (res.code == 1) {
                        var cText = res.data.url;
                            var aux = document.createElement("input");
                            aux.setAttribute("value", cText);
                            document.body.appendChild(aux);
                            aux.select();
                            document.execCommand("copy");
                            document.body.removeChild(aux);
                            alert("链接复制成功!");
                        }else {
                            alert(res.msg);
                        }
                    })
        },
        delVideo(index, item) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "操作提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(async () => {
                //取出当前video数据
                let video = this.videoList[index];
                //请求删除接口
                //......
                let data = {
                    id: item.id,
                    image_list: [item.image_url_old],
                    video_list: [item.video_url]
                }
                let res = await brandModel.deleteVideo(data);
                console.log('del====》', res)
                if (res.code === 1) {
                    //从数组中移除
                    this.videoList.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                }else{
					this.$message.error(res.msg);
				}

            }).catch((_) => { });
        },
        uploadBtn() {
            this.$refs.uploadVideo.init(this.carTypeId);
        },
        editVideo(row) {
          this.$refs.uploadVideo.init(this.carTypeId, row);
        },
        async getList() {
            let { carTypeId } = this.$route.params;
            let res = await brandModel.getsVideo({ brand_id: carTypeId });
            if (res.code === 1 && res.data) {
                this.videoList = res.data;
            }
        }
    },
    created() {
        this.$parent.tabLists = [
            { label: "厂商品牌", name: "ytcarsBrandModel" },
            { label: "车型车款", name: "ytcarsBrandStyle"},
            { label: "上传视频", name: "ytcarsBrandVideo" },
        ];
        this.carTypeId = this.$route.params.carTypeId; //车型ID
        if (this.carTypeId) {
            this.getBreadcrumb();
        }
        this.getList()
    },
};
</script>

<style lang="scss" scoped>
.content {
    .top-breadcrumb {
        padding: 24px 15px 12px;
    }
    .upload {
        float: right;
        margin-top: -16px;
    }
    .divider_text {
        div {
            font-size: 15px;
            font-weight: 600;
        }
    }
    .video-list {
        width: 100%;
        margin-top: 15px;
        li {
            float: left;
            width: 19%;
            max-width: 230.5px;
            margin: 0 0.5% 5px;
            .video-item-image {
                position: relative;
                cursor: pointer;
                padding-bottom: 134.969325%;
                .video-image {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    display: inline-block;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                }
                .top-label {
                    position: absolute;
                    top: -4px;
                    right: 0;
                    width: 60px;
                    height: 60px;
                    z-index: 99;
                }
                .is-expire {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    z-index: 66;
                    background: url(~@/assets/images/icon_status_expire.png) no-repeat center rgba(0, 0, 0, 0.4);
                    background-size: 30%;
                }
                .play-mask {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 30px;
                    display: none;
                       .video-message:hover {
                            color: #ff1515;
                        }
                        .video-message {
                            position: absolute;
                            right: 60px;
                            bottom: 5px;
                            width: 20px;
                            height: 20px;
                            margin: auto;
                            color: #ffffff;
                            z-index: 99;
                        }
                    .top-video {
                        position: absolute;
                        right: 35px;
                        bottom: 5px;
                        width: 20px;
                        height: 20px;
                        margin: auto;
                        color: #ffffff;
                        z-index: 99;
                    }
                    .top-video:hover {
                        color: #ff1515;
                    }
                    .video-del {
                        position: absolute;
                        right: 8px;
                        bottom: 5px;
                        width: 20px;
                        height: 20px;
                        margin: auto;
                        color: #ffffff;
                        z-index: 99;
                    }
                    .video-del:hover {
                        color: #ff1515;
                    }
                    .play-mask-bg {
                        width: 100%;
                        height: 100%;
                        background-color: #000;
                        opacity: 0.6;
                    }
                }
            }
            .video-item-image:hover {
                .play-mask {
                    display: block;
                }
            }
            .video-title {
                display: inline-block;
                font-size: 12px;
                width: 100%;
                height: 45px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                padding: 3px 10px;
            }
        }
    }
}
</style>